---
{
	"title": "Mise en surbrillance de texte",
	"language": "fr",
	"category": "Plugiciels",
	"categoryfile": "plugins",
	"description": "Met en surbrillance sur une page Web les mots choisis.",
	"altLangPrefix": "texthighlight",
	"dateModified": "2014-08-04"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>But</h2>
	<p>Le composant de mise en surbrillance de texte met en surbrillance n'importe quel texte dans un secteur pré-défini qui satisfait des critères de recherche. Les critères de recherche sont insensibles à la casse et sont spécifiés par la chaîne d'interrogation d'une adresse URL. Les chaînes avec plusieurs mots sont supportées, y compris les espaces et la ponctuation fondamentale.</p>
	<p><strong>Nota&#160;:</strong> Les critères de recherche regroupant des caractères spéciaux d'expression régulière («&#160;regex&#160;», <abbr title="par exemple">p.ex.</abbr>, «&#160;<code>"</code>&#160;», «&#160;<code>|</code>&#160;», «&#160;<code>?</code>&#160;», «&#160;<code>+</code>&#160;», «&#160;<code>(</code>&#160;» ou «&#160;<code>)</code>&#160;») peuvent être partiellement ou entièrement exclus des résultats.</p>
</section>

<section>
	<h2>Utiliser lorsque</h2>
	<ul>
		<li>Mettre en surbrillance les termes de recherche dans une page de résultats de recherche</li>
		<li>Mettre en surbrillance des mots clés dans une page Web</li>
		<li>Aider l'utilisateur à retrouver toutes les occurrences d'un ou de plusieurs mots dans une page Web</li>
	</ul>
</section>

{{!-- Section for non-text contrast test.
The ratio should be greater than 3:1.
The background color used for highlight is #ffff00 and the font color is #000000, resulting in ratio of 19.55:1.
--}}
<section>
	<h2>Non-text contrast</h2>
	<p>According to <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Success Criterion 1.4.11: Non-text Contrast</a>, the contrast ratio is required to be at least 3:1.</p>
	<p>The background color used for highlight is #ffff00 and the font color is #000000, resulting in ratio of 19.55:1</p>
</section>

<section>
	<h2>Exemple pratique</h2>
	<section>
		<h3>Critères de recherche - Exemple</h3>
		<ul>
			<li>influenza aviaire</li>
			<li>monde</li>
			<li>suffis</li>
			<li>symptômes semblables à ceux de l'influenza</li>
			<li>À titre de rappel</li>
			<li>À de rares occasions, des humains ont été infectés par ce virus.</li>
		</ul>

		<p><strong>La chaîne d'interrogation&#160;:</strong> <code>?<span lang="en">txthl</span>=influenza%20aviaire+monde+suffis+symptômes%20semblables%20à%20ceux%20de%20l'influenza<br>+À%20titre%20de%20rappel...+À%20de%20rares%20occasions,%20des%20humains%20ont%20été%20infectés%20par%20ce%20virus.</code></p>

		<p><a href="../../../demos/texthighlight/texthighlight-en.html?txthl=influenza%20aviaire+monde+suffis+sympt%C3%B4mes%20semblables%20%C3%A0%20ceux%20de%20l'influenza+%C3%80%20titre%20de%20rappel...+%C3%80%20de%20rares%20occasions,%20des%20humains%20ont%20%C3%A9t%C3%A9%20infect%C3%A9s%20par%20ce%20virus.#exemple">Mise en surbrillance le texte qui satisfait les critères de recherche</a></p>
	</section>
</section>

<div lang="en">
<strong>Needs translation</strong>
<section>
	<h2>How to implement</h2>
	<ol>
		<li>Step 1</li>
		<li>Step 2
			<pre><code>Example code</code></pre>
		</li>
		<li>Step 3
			<pre><code>Example of multi-line code
Example of multi-line code
Example of multi-line code</code></pre>
		</li>
		<li>Step 4</li>
	</ol>
</section>

<section>
	<h2>Configuration options</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Option</th>
				<th>Description</th>
				<th>How to configure</th>
				<th>Values</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>txthl</code></td>
				<td>Query string parameter that specifies the search criteria for the text to highlight.</td>
				<td>Add <code>txthl=&lt;text_1&gt;+&lt;text_2&gt;+&lt;text_3&gt;</code> to the query string.<br><strong>Note:</strong> HTML markup validation requires all spaces in links to be replaced by <code>%20</code>.</td>
				<td>Strings separated by + characters.</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Events</h2>
	<p>Document the public events that can be used by implementers or developers.</p>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-txthl</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-txthl" ).trigger( "wb-init.wb-txthl" );</code>).</td>
				<td>Used to manually enhance an element with the Text highlighting plugin. <strong>Note:</strong> The Text highlighting plugin will be initialized automatically unless the element is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-txthl</code> (v4.0.5+)</td>
				<td>Triggered automatically after the Text highlight plugin initializes.</td>
				<td>Used to identify where the Text highlight plugin was initialized (target of the event).
					<pre><code>$( document ).on( "wb-ready.wb-txthl", ".wb-txthl", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-txthl" ).on( "wb-ready.wb-txthl", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/texthighlight">Text highlighting source code on GitHub</a></p>
</section>
</div>
